<template>
    <div>
        <page-top :active="'7'" :logoPic="logoPic"></page-top>
        <div :style="style">
            <div class="text">
                <div class="line"></div>
                <div style="float:left;margin-left: 10px">
                    <p style="font-size: 48px;">加入我们</p>
                    <div class="clear"></div>
                    <p style="font-size: 34px;letter-spacing: 3px">JOIN US</p>
                </div>
            </div>
        </div>
        <div>
            <h2 class="joinUsH2">社会职位</h2>
            <div class=" joinUsList">
                <span class="joinZhiwei">职位类别：</span>
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"  style="display:inline-block;background:#cccccc">
                    
                    <el-menu-item :index='0' @click="getRecruit()" style="background:#cccccc">全部</el-menu-item>
                    <el-menu-item v-for="(item,index) in recruit.type" :key='index' :index='index+1'  :data_id="item.id" @click="getRecruit(item.id)" style="background:#cccccc">{{item.name}}</el-menu-item>
                </el-menu>
            </div>
            <ul class="joinUsTypeList">
                <li style="width:264px">职位名称</li>
                <li style="width:190px">职位类别</li>
                <li style="width:210px">招聘人数</li>
                <li>发布时间</li>
            </ul>
            <ul>
                <li v-for="(item,index) in recruit.content" :key="index">
                    <ul class="joinUsTypeList" style="color:#333333">
                        
                        
                        <el-collapse v-model="activeNames" @change="handleChange" class="shoufeng" style="">
                            <el-collapse-item title="" name="1" class="jobContent">
                                <template slot="title">
                                    <ul>
                                        <li style="width:264px">{{item.title}}</li>
                                        <li style="width:190px">{{item.name}}</li>
                                        <li style="width:210px">{{item.number}}</li>
                                        <li>{{item.create_time}}</li>
                                    </ul>
                                </template>
                                <div class="joinUsContent">
                                    <span>你的工作内容：</span>
                                    <div v-html="item.content"></div>
                                    <div style="text-align:center;margin-top:40px"><el-button type="danger">应聘请投邮箱</el-button></div>
                                </div>
                            </el-collapse-item>
                        </el-collapse>
                    </ul>
                   
                </li>
            </ul>
            
            <div style="width:1200px;margin:80px auto;overflow:hidden">
                <el-pagination @current-change="handleCurrentChange" layout="prev, pager, next" :current-page="page" :total="page_count" style="color:#333333;float:right" :page-size="6"></el-pagination>
            </div>
        </div>
        <page-bottom :napinAddress="way.position"></page-bottom>
    </div>
</template>

<script>
import pageTop from "@/components/common/pageTop";
import pageBottom from "@/components/common/pageBottom.vue";
import request from '@/request/index.js';
    export default {
        name: "joinUs",
        components:{
            'PageTop': pageTop,
            'PageBottom': pageBottom,
        },
       
        data(){
            return{
                recruit:{},
                id:'',
                page:1,
                type_id:"",
                page_count:0,
                way:{},
                style:{
                    backgroundImage: "url(" + require("../images/officalPic/97.png") + ")",
                    backgroundPosition:'center center',
                    backgroundSize:'1920px 560px',
                    height:'560px',
                    width:'100%',
                    position:'relative'
                },
                activeIndex:'0',
                isShow:[],
                logoPic:"",
            }
        },
          watch: {
            type_id(newName,oldName){
                this.page=1;
                request.getPcRecruit(this,this.page,this.type_id);
            },
            page(newName,oldName){
                request.getPcRecruit(this,this.page,this.type_id);
            }
        },
        methods:{
            getShow:function(i){
                this.isShow[i]=!this.isShow[i];
            },
            handleCurrentChange(val) {
                this.page=val
            },
            getRecruit:function(id){
                this.type_id=id;
                // request.getPcRecruit(this,this.page,this.type_id);
            }
        },
        created(){
            this.loading=this.$loading({
            lock: true,
            // text: 'Loading',
            // spinner: 'el-icon-loading',
            background: 'rgba(255, 255, 255, 0.6)',
            target: document.querySelector('body'),
            
            });
        },
        mounted(){
            request.getPcRecruit(this,this.page,this.type_id);
            request.GetContact(this);
            request.home(this);

        }
    }
</script>

<style scoped lang="scss">
.el-menu--horizontal>.el-menu-item:not(.is-disabled):hover{
    color:#FF4C50!important;
    background:#cccccc!important;
    
}
.joinUsContent{
    background: rgba(255,76,80,.2);
    width: 1200px;
    margin: 0 auto;
    padding:20px;
}
.joinUsTypeList{
    padding:0 150px;
    overflow: hidden;
    width: 1200px;
    margin: 0 auto;
    .el-collapse-item__header{
        border-bottom:none!important;
        padding-bottom: 23px!important;
        height:72px;

    }
    .el-collapse-item__content{
        width:100%;
    }
    .shoufeng{
        // float:right;
        // width:40px;
        // height:20px
    }
    .jobContent{
        // position: absolute;
        // top:72px;
        // left:0px;
    }
    li{
        float: left;
        line-height: 48px;
        font-size:20px;
    }
}
.joinZhiwei{
    // line-height:64px;
    display: inline-block;
    height:64px;
    margin-right:20px;
    vertical-align: top;
    line-height: 64px;
}
.joinUsList{
    font-size: 20px;
    padding:0 150px;
    overflow: hidden;
    width: 1200px;
    margin: 0 auto;
    background:#cccccc;
    // li{
    //     float: left;
    //     margin: 0 10px;
    // }
    menu--horizontal>.el-menu-item:not(.is-disabled):focus{
        background:#cccccc!important;
    }
    .el-menu-item{
        line-height: 2em;
        height:2em;
        padding:0px;
        margin:16px 20px;
    }
}
.joinUsH2{
    line-height:5em;
    font-size:24px;
    color:#333333;
    text-align: center;
    font-weight: 100;
}
.el-pager li.active{
    color:#FF4C50!important;
}
.el-pager li:hover{
    color:#FF4C50!important;
}
.text{
    position:absolute;
    top:245px;
    left:150px;
}
    .line{
        width: 6px;
        height: 90px;
        background: #fff;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        float: left;
    }
    p{
        color: #fff;
        margin-top: -7px;
    }
    .el-menu-item.is-active {
        color: #FF4C50!important;
        border-bottom:1px #FF4C50 solid !important;
    }
    .el-menu.el-menu--horizontal{
        border:none!important;
    }

</style>
